<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/teahome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>作业列表</el-breadcrumb-item>
        </el-breadcrumb>
         <!--添加区-->
        <el-row :gutter="15">
        <el-col span="10">
                 <el-button type="primary" @click="addDialogVisible=true">发布作业</el-button>
                 
        </el-col>
        </el-row>

        <!--用户列表主部分-->
        <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="未批阅" name="first">
            <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getWorkList1">
                    <el-button slot="append" icon="el-icon-search" @click="getWorkList1"></el-button>
                   </el-input>
                </el-col>
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="workList1" border stripe>
                <el-table-column label="作业id" prop="wid"></el-table-column>
                <el-table-column label="标题" prop="wtitle"></el-table-column>
                <el-table-column label="内容" prop="wcontent"></el-table-column>
                <el-table-column label="图片" prop="bpicture"></el-table-column>
                <el-table-column label="开始时间" prop="wbtime"></el-table-column>
                <el-table-column label="截止时间" prop="wetime" ></el-table-column>
                <el-table-column label="成绩" prop="fwgrade" ></el-table-column>
                 <el-table-column label="评语" prop="fwcomment" ></el-table-column>
                <el-table-column label="操作" prop="Action">
        
               <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">批阅</el-button>
               </template>
               </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
            </el-tab-pane>
            <el-tab-pane label="已批阅" name="second">
                <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getWorkList2">
                    <el-button slot="append" icon="el-icon-search" @click="getWorkList2"></el-button>
                   </el-input>
                </el-col>
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="workList2" border stripe>
                <el-table-column label="作业id" prop="wid"></el-table-column>
                <el-table-column label="标题" prop="wtitle"></el-table-column>
                <el-table-column label="内容" prop="wcontent"></el-table-column>
                <el-table-column label="图片" prop="bpicture"></el-table-column>
                <el-table-column label="开始时间" prop="wbtime"></el-table-column>
                <el-table-column label="截止时间" prop="wetime" ></el-table-column>
                <el-table-column label="成绩" prop="fwgrade" ></el-table-column>
                 <el-table-column label="评语" prop="fwcomment" ></el-table-column>
                <el-table-column label="操作" prop="Action">
        
               <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">修改批阅</el-button>
               </template>
               </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
            </el-tab-pane>
            <el-tab-pane label="未提交" name="third">
                <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getWorkList1">
                    <el-button slot="append" icon="el-icon-search" @click="getWorkList1"></el-button>
                   </el-input>
                </el-col>
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="workList3" border stripe>
                <el-table-column label="作业id" prop="wid"></el-table-column>
                <el-table-column label="标题" prop="wtitle"></el-table-column>
                <el-table-column label="内容" prop="wcontent"></el-table-column>
                <el-table-column label="图片" prop="bpicture"></el-table-column>
                <el-table-column label="开始时间" prop="wbtime"></el-table-column>
                <el-table-column label="截止时间" prop="wetime" ></el-table-column>
                <el-table-column label="成绩" prop="fwgrade" ></el-table-column>
                 <el-table-column label="评语" prop="fwcomment" ></el-table-column>
                <el-table-column label="操作" prop="Action">
        
               <!-- <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">批阅</el-button>
               </template> -->
               </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
            </el-tab-pane>
        </el-tabs>

      </template>
         <!--添加区域弹窗-->
        <el-dialog wtitle="发布作业" :visible.sync="addDialogVisible" wwidth="50%" @close="addDialogClose">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-wwidth="70px">
                <el-form-item label="作业id" prop="wid">
                    <el-input v-model="addForm.wid"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="cid">
                    <el-input v-model="addForm.cid"></el-input>
                </el-form-item>
                <el-form-item label="标题" prop="wtitle">
                    <el-input v-model="addForm.wtitle"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="wcontent">
                    <el-input v-model="addForm.wcontent"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="wbtime">
                    <el-date-picker v-model="addForm.wbtime" type="date"  placeholder="选择日期"></el-date-picker>
                 
                </el-form-item>
                <el-form-item label="结束时间" prop="wetime">
                    <el-date-picker v-model="addForm.wetime" type="date"  placeholder="选择日期"></el-date-picker>
               
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">  
                <el-button @click="addDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="addWork">发布</el-button>
            </span>
        </el-dialog>

        <!--批阅区域弹窗-->
        <el-dialog wtitle="批改作业" :visible.sync="editDialogVisible" wwidth="50%" @close="editDialogClose">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-wwidth="70px">
                <el-form-item label="标题" prop="wtitle">
                    <el-input v-model="editForm.wtitle" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="wcontent">
                    <el-input v-model="editForm.wcontent" disabled></el-input>
                </el-form-item>
                <el-form-item label="作业内容" prop="fwtext">
                    <el-input v-model="editForm.fwtext" disabled></el-input>
                </el-form-item>
                <el-form-item label="成绩" prop="bpicture">
                    <el-input v-model="editForm.fwgrade"></el-input>
                </el-form-item>
                <el-form-item label="评语" prop="fwcomment">
                    <el-input v-model="editForm.fwcomment"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">  
                <el-button @click="editDialogVisible">取消</el-button>
                <el-button type="primary" @click="editWork">确认批阅</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default{
        created(){
           this.getWorkList1();
           this.getWorkList2();
           this.getWorkList3();
        },
        data(){
            return{
                //查询信息实体 this.$store.state.nowtname2 this.$store.state.nowtpwd2
                queryInfo:{
                    query:"",
                    pageNum:1,
                    pageSize:5,
                    nowtname:"刘芳",
                    nowtpwd:"123456"
                },
                workList1:[],//作业列表
                workList2:[],//作业列表
                workList3:[],//作业列表
                total:0,
                //对话框状态
                addDialogVisible:false,
                editDialogVisible:false,
                //表单信息
                addForm:{
                    wid:"",
                    cid:"",
                    wtitle:"",
                    wcontent:"",
                    wbtime:"",
                    wetime:"",
                },
                editForm:{
                    wtitle:"",
                    wcontent:"",
                    fwtext:"",
                    fwgrade:"",
                    fwcomment:""
                },
                //表单验证
                addFormRules:{
                    wid: [
                        { required: true, message: '请输入作业wid', trigger: 'blur' },
                       
                          ],
                    wtitle: [
                        { required: true, message: '请输入作业标题', trigger: 'blur' },
                      
                          ],   
                    wcontent: [
                        { required: true, message: '请输入作业内容', trigger: 'blur' },
               
                          ],      
                    wetime: [
                        { required: true, message: '请输入作业开始时间', trigger: 'blur' },
               
                          ],   
                    wbtime: [
                        { required: true, message: '请输入作业结束时间', trigger: 'blur' },
            
                          ],
                     },
               
            }

        },
        methods:{
           async getWorkList1(){
                const {data:res} =await this.$http.get("allSeeHomeworkD",{params:this.queryInfo});
                this.workList1=res.data;//列表数据封装
                this.total=res.number;//总数封装
            },
            async getWorkList2(){
                const {data:res} =await this.$http.get("allSeeHomeworkS",{params:this.queryInfo});
                this.workList2=res.data;//列表数据封装
                this.total=res.number;//总数封装
            },
            async getWorkList3(){
                const {data:res} =await this.$http.get("allSeeHomeworkT",{params:this.queryInfo});
                this.workList3=res.data;//列表数据封装
                this.total=res.number;//总数封装
            },
            //最大数
            handleSizeChange1(newSize){
                this.queryInfo.pageSize=newSize;
                this.getWorkList1();
            },
            //pageNum的触发
            handleCurrentChange1(newPage){
                this.queryInfo.pageNum=newPage;
                this.getWorkList1();
            },
            handleSizeChange2(newSize){
                this.queryInfo.pageSize=newSize;
                this.getWorkList2();
            },
            //pageNum的触发
            handleCurrentChange2(newPage){
                this.queryInfo.pageNum=newPage;
                this.getWorkList2();
            },
            handleSizeChange3(newSize){
                this.queryInfo.pageSize=newSize;
                this.getWorkList3();
            },
            //pageNum的触发
            handleCurrentChange3(newPage){
                this.queryInfo.pageNum=newPage;
                this.getWorkList3();
            },

            //添加
            //监听添加操作
            addDialogClose(){
                this.$refs.addFormRef.resetFields();
            },
            addWork(){
                this.$refs.addFormRef.validate(async valid=>{
                   if(!valid) return;
                   const {data:res}=await this.$http.post("addWork",this.addForm);
                   if(res!="success"){
                       return this.$message.error("添加失败！");
                   }
                   this.$message.success("添加成功！");
                   this.addDialogVisible=false;
                   this.getWorkList1();
                   this.getWorkList2();
                   this.getWorkList3();
                   
                });  
            },
            
            //批阅
            //显示对话框，按钮触发
            async showEditDialog(s){
                this.editForm=s;//存储查询信息
                this.editDialogVisible=true;//开启编辑框
            },
            //监听批阅操作
            editDialogClose(){
                this.$refs.editFormRef.resetFields();//关闭窗口，重置信息
            },
            //确认批阅
            editWork(){
                this.$refs.editFormRef.validate(async valid=>{
                    if(!valid) return;
                   const {data:res}=await this.$http.put("editFinishworkT",this.editForm);
                   if(res!="success"){
                       return this.$message.error("批阅失败！");
                   }else
                   this.$message.success("批阅完成！");
                   this.editDialogVisible=false;
                   this.getWorkList1();
                   this.getWorkList2();
                   this.getWorkList3();
                   
                });
                   
            },
        }

    }
</script>
<style  scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
</style>